import React from 'react';
import styles from './index.less';
import { Modal, Form, Input, Select, InputNumber, Spin } from 'antd';
import { FormInstance } from 'antd/es/form';
import { IState, IData, IProps, IGoodsType, IResponse } from './type';
import request from 'umi-request';
import { getServiceGoodsNorms } from '@/service/goods';

export default class SaleForm extends React.Component<IProps, IState> {
  // 组件需要使用到的变量
  state = {
    normsList: [], //类别数组
    spinning: false, //loading状态
  };

  // loading效果加载
  spinLoading = () => {
    this.setState({
      spinning: true,
    });
  };

  // 失去loading效果
  spinStopLoading = () => {
    this.setState({
      spinning: false,
    });
  };

  // 表单元素的Ref
  formRef = React.createRef<FormInstance>();

  handleOk = () => {};

  // 点击取消时关闭新增或修改弹框
  handleCancel = (): void => {
    this.props.handleCancel();
  };

  handleChange = () => {};

  // 修改和增加弹框的共用方法
  otherModifyOrAdd = (url: string, data?: IData) => {
    request.post(url, { data }).then((res: IResponse) => {
      if (res && res.code == 200) {
        this.props.getFormData();
        this.handleCancel();
        this.spinStopLoading();
      }
    });
  };

  // 数据全部填入并提交时的回调
  onFinish = (values: IData): void => {
    this.spinLoading();
    const { selectKey } = this.props;
    // 如果修改时，调用修改接口并传入参数
    if (selectKey) {
      this.otherModifyOrAdd('/modify', {
        ...values,
        selectKey,
      });
    } else {
      // 如果新增时，调用新增接口并传入参数
      this.otherModifyOrAdd('/addGoods', values);
    }
  };

  onFinishFailed = () => {};

  // 组件挂载时生命周期
  componentDidMount() {
    // 请求商品规格接口
    getServiceGoodsNorms().then((res: IResponse) => {
      res && this.setState({
        normsList: (res.data as IGoodsType[]),
      });
    });
  }

  render(): React.ReactNode {
    const {
      goodsCode,
      goodsName,
      norms,
      goodsType,
      unit,
      selectList,
      selectKey,
    } = this.props;
    const { Option } = Select;
    return (
      <>
        <Modal
          title={`${selectKey ? '修改' : '新增'}商品`}
          visible={this.props.visible}
          onOk={() => this.formRef.current?.submit()}
          onCancel={this.handleCancel}
          destroyOnClose
          okText="确定"
          cancelText="取消"
        >
          <Spin tip="加载中" spinning={this.state.spinning}>
            <Form
              name="basic"
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 16 }}
              initialValues={{ remember: true }}
              onFinish={this.onFinish}
              onFinishFailed={this.onFinishFailed}
              autoComplete="off"
              ref={this.formRef}
            >
              <Form.Item
                label="商品编码"
                name="goodsCode"
                rules={[{ required: true, message: '请输入商品编码' }]}
                className={styles.formItem}
                initialValue={selectKey ? goodsCode : undefined}
              >
                <Input placeholder="请输入商品编码" />
              </Form.Item>
              <Form.Item
                label="商品名称"
                name="goodsName"
                rules={[{ required: true, message: '请输入商品名称' }]}
                className={styles.formItem}
                initialValue={selectKey ? goodsName : undefined}
              >
                <Input placeholder="请输入商品名称" />
              </Form.Item>
              <Form.Item
                label="商品规格"
                name="norms"
                rules={[{ required: true, message: '请输入商品规格' }]}
                className={styles.formItem}
                initialValue={selectKey ? norms : undefined}
              >
                <Select
                  placeholder="请选择商品规格"
                  onChange={this.handleChange}
                >
                  {this.state.normsList.map((item: IGoodsType) => {
                    return (
                      <Option value={item.type} key={item.id}>
                        {item.type}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
              <Form.Item
                label="商品类别"
                name="goodsType"
                rules={[{ required: true, message: '请输入商品类别' }]}
                className={styles.formItem}
                initialValue={selectKey ? goodsType : undefined}
              >
                <Select
                  placeholder="请选择商品类别"
                  onChange={this.handleChange}
                >
                  {selectList.map((item: IGoodsType) => {
                    return (
                      <Option value={item.type} key={item.id}>
                        {item.type}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
              <Form.Item
                label="商品单价"
                name="unit"
                rules={[{ required: true, message: '请输入商品单价' }]}
                className={styles.formItem}
                initialValue={selectKey ? unit : undefined}
              >
                <InputNumber placeholder="请输入商品单价" />
              </Form.Item>
            </Form>
          </Spin>
        </Modal>
      </>
    );
  }
}
